<template>
  <div class="">
    <el-card class="box-card">
      <div class="t-left w300">
        <el-input placeholder="请输入内容" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <!-- 表格 -->
      <el-table :data="ordersData" border style="width: 100%">
        <el-table-column type="index" width="50">
        </el-table-column>
        <el-table-column prop="order_number" label="订单编号" width="230">
        </el-table-column>
        <el-table-column prop="order_price" label="订单价格" width="180">
        </el-table-column>
        <el-table-column prop="pay_status" label="是否付款" width="180">
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货" width="180">
        </el-table-column>
        <el-table-column prop="update_time" label="下单时间" width="180">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit" type="primary" size="small" @click="editOrders(scope.row)">
            </el-button>
            <el-button icon="el-icon-location-outline" type="success" size="small" @click="editDress(scope.row)">
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination layout="prev, pager, next" :total="100" @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
      <!-- 修改弹窗 -->
      <el-dialog title="提示" :visible.sync="editVisible" width="30%">
        <el-form :model="editForm" ref="editForm" label-width="100%" class="demo-ruleForm">
          <el-form-item label="订单是否发货（1:已经发货，0:未发货）">
            <el-input v-model="editForm.is_send"></el-input>
          </el-form-item>
          <el-form-item label="订单支付（支付方式 0 未支付 1 支付宝 2 微信 3 银行卡）">
            <el-input v-model="editForm.order_pay"></el-input>
          </el-form-item>
          <el-form-item label="订单价格">
            <el-input v-model="editForm.order_price"></el-input>
          </el-form-item>
          <el-form-item label="订单数量">
            <el-input v-model="editForm.order_number"></el-input>
          </el-form-item>
          <el-form-item label="支付状态（订单状态： 0 未付款、1 已付款）">
            <el-input v-model="editForm.pay_status"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitEdit">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改地址 -->
      <el-dialog title="提示" :visible.sync="editDressVisible" width="30%">

        <el-form :model="addressForm" ref="addressFormRef" label-width="100px">
          <el-form-item label="省市区县" prop="address1">
            <el-cascader :options="cityData" v-model="addressForm.address1"></el-cascader>
          </el-form-item>
          <el-form-item label="详细地址" prop="address2">
            <el-input v-model="addressForm.address2"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="editDressVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitEditDress">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
  import cityData from "../assets/citydata"
  export default {
    components: {},
    data() {
      return {
        ordersData: [],
        // 修改弹窗变量
        editVisible: false,
        // 修改订单参数
        editForm: {
          is_send: '',
          order_pay: '',
          order_price: '',
          order_number: '',
          pay_status: ''
        },
        // 订单id
        id: '',
        // 地址弹窗
        editDressVisible: false,
        // 省市区联动
        cityData,
        // 收货地址
        addressForm: {
          address1: [],
          address2: '',
        }
      }
    },
    created() {},
    mounted() {
      this.getOrdersData(1)
    },
    watch: {},
    computed: {},
    methods: {
      getOrdersData(num) {
        this.$axios.get('orders', {
          params: {
            pagenum: num,
            pagesize: 5
          }
        }).then(val => {
          this.ordersData = val.data.goods
          console.log(this.cityData);
        })
      },
      //   分页
      handleSizeChange(val) {
        this.getOrdersData(val)
      },
      handleCurrentChange(val) {
        this.getOrdersData(val)
      },
      //   修改订单按钮打开弹窗
      editOrders(row) {
        // this.id = id
        this.id = row.order_id
        console.log(row);
        this.editForm = row
        // this.editForm.is_send = row.is_send
        // this.editForm.order_pay = row.order_pay
        // this.editForm.order_price = row.order_price
        // this.editForm.order_number = row.order_number
        // this.editForm.pay_status = row.pay_status
        this.editVisible = true
        console.log(this.editForm);
      },
      //   提交修改
      submitEdit() {
        this.editVisible = false
        this.$axios.put('orders/' + this.id, {
          params: this.editForm
        }).then(val => {
          console.log(val);
        })
      },
      //   修改地址按钮
      editDress() {
        this.editDressVisible = true
      },
      //   提交修改地址
      submitEditDress() {
        this.editDressVisible = false
      }
    },
  }

</script>
<style lang="css" scoped>
  .el-form-item__label {
    width: 100%;
  }

</style>
